/**
 * for developement only. to publish create a CSS file with the 
 * compiled styles
 */

// Variables
// --------------------------------------------------
$white           : rgb(250,250,250);
$black           : rgb(50,50,50);
$BaseColor       : rgb(140,190,110);
$AccentColor1    : rgb(70,95,55);
$AccentColor2    : rgb(35,45,25);
$linkColor       : 4AccentColor1;
$linkColorAlt    : lighten( $AccentColor1, 10%);
$unit            : 14px;
$baseFontSize    : $unit;
$bs              : $baseFontSize;
$BaseCopyColor   : $white;
$fontFamilyStack : 'Myriad Pro', Myriad, sans-serif;
$fontFamilyAlt   : serif;
$themeFolder     : '/themes/tsgdesign';
$themeImages     : '#{$themeFolder}/images';

// Mixins
// --------------------------------------------------
@import 'baseMixins';
@import 'typography';

// Helpers
// --------------------------------------------------
.clear:after
{
  content: ".";
  display: block;
  height: 1px;
  line-height: 1px;
  visibility: hidden;
  clear: both;
}

img.alignleft
{
  float: left;
  margin-right: $baseFontSize;
  margin-bottom: $baseFontSize;
}

// HTML Basic
// --------------------------------------------------
html {
  width: 100%;
  height: 100%;
}

body {
  background: $black url('#{$themeImages}/wall-texture.gif') repeat;
  margin: 0;
  padding-top: $bs;
  padding-bottom: $bs;
}

ins {
  background-color: hsl( hue($AccentColor2), 100%, 75% );
}

a {
  color: $BaseColor;
  font-weight: 100;

  &:active {
    color: lighten($BaseColor, 60%);
  }
  &:visited { color: $BaseColor; }
  &:hover {
    color: lighten($BaseColor, 60%);
    @include transition( all, 0.5s, ease );
  }
}

aside {
  width: 33%;
  &, &.right {
    float: right;
    margin: 0 0 $bs $bs;
  }

  &.left {
    float: left;
    margin: 0 $bs $bs 0;
  }
}

figure {
  &.alignleft {
    float: left;
    margin: 0 $bs $bs 0;
  }
  &.alignright {
    float: right;
    margin: 0 0 $bs $bs;
  }
  figcaption {
    font-size: $bs*0.875;
  }
}

// Headings
// --------------------------------------------------
h1, h2, h3, h4, h5, h6
{
  font-family: $fontFamilyAlt;
  margin: 0.5em 0;
}

h1
{
  font-size: 2.25em;
  color: $BaseColor;
}
h2
{
  font-size: 2.00em;
  color: $AccentColor1;
}
h3
{
  font-size: 1.75em;
  color: darken( $AccentColor1, 10% );
}
h4
{
  font-size: 1.50em;
  color: darken( $AccentColor1, 20% );
}
h5
{
  font-size: 1.25em;
  color: darken( $AccentColor1, 20% );
}
h6
{
  font-size: 1.00em;
  color: darken( $AccentColor1, 20% );
}

// Stop nested elemnts from shrinking further
h1, h2, h3, h4, h5, h6
{
  * {
    font-size: 1em;
  }
}

// place this after the h# tags
hgroup 
{
  margin: 2em 0;
  * { margin: 0; }
}

// Body copy elements
// --------------------------------------------------
p,
dl,
li
{
  font-size: $bs;

  // Stop nested elements from shrinking further
  * { font-size: 1em; }
}

li
{
  *
  {
    // 2nd level elements are smaller
    font-size: 0.875em;

    *
    {
      // then stop shrinking
      font-size: 1em;
    }
  }
}

dl {
  dt {
    font-weight: bold;
    margin-top: 0.5em;
  }

  dd {
  }
}

article
{
  footer
  {
    font-size: 0.875em;
    color: lighten( $BaseCopyColor, 30);
  }
}

footer#footer
{
  border-top: 1px solid $BaseColor;
  margin-top: 2em;
  padding-top: 2em;
  padding: $bs/2 5%;
  color: lighten($black, 50%);
}

// Styles by ID tags
// --------------------------------------------------
#content {
  width: 97%;
  margin: 0 auto;
}

#content {
  #paper {
    padding: 2.5em 10%;
  }
}

header#header
{
  &:before {
    display: block;
    position: absolute;
    top: 0;
    height: $bs;
    width: 100%;
    content: ' ';
    @include gradientX( $AccentColor1, $BaseColor, $AccentColor2 );
  }

  &:after {
    content: '.';
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
  }
}

#identity
{
  margin: 1.25em auto;
  text-align: center;

  a.logo {
    background-image: url('#{$themeImages}/byTylerGordon.png');
    background-repeat: none;
    width: 200px;
    height: 60px;
    display: block;
    overflow: hidden;
    margin: 0 auto;
  }
}
// Modernizr : SVG progressive enhancement
.svg #identity a {
  background-image: url('#{$themeImages}/byTylerGordon.svg');
  width: 300px;
  height: 90px;
  @include background-size();
}

#search {
  margin: 16px auto;
  padding: 0 10%;
  text-align: center;
  
  input {
    line-height: 1.125;
    font-size: $bs;
    padding: $bs/2 $bs;
    outline: 0;
    border: 1px solid rgb(120,120,120);
  }

  input.searchbox {
    width: 50%;
    margin: 0 auto;
  }
}

#socialMe {
  list-style-type: none;
  text-align: center;
  
  li {
    display: inline;

    a {
      text-decoration: none;
      padding: 0 $bs/4;
    }
  }
}

/*
--------------------
Navigation
--------------------
  <nav id="main" class="menu">
    <ul class="menu">
      <li>
        <a href="URL">Label</a>
      </li>
    </ul>
  </nav>
*/

// address the #main aspect here and not the .menu aspect
nav#main
{
  margin: 0 auto;
  text-align: center;
  padding-right: $bs*4;

  ul {
    list-style: inside none;
    margin: $bs*2 0;
    li {
      display: inline;
      padding: 0 $bs/3;
    }
  }

  a {
    font-size: $bs;
    font-weight: 100;
    padding: $bs $bs*2;
    text-decoration: none;
    color: $white;
    @include rounded(6px,6px,6px,6px);
    @include box-shadow();
    @include gradientY(fade($BaseColor, 10%),darken($BaseColor, 30%),$BaseColor);

    &.active {
      color: $AccentColor1;
      @include gradientY(fade($BaseColor, 20%),darken($BaseColor, 15%),lighten($BaseColor,15%));
    }
  }
  a:active { color: $AccentColor1; }
  a:hover {
    color: $AccentColor2;
    background-color: $BaseColor;
    @include gradientY(fade($BaseColor, 10%),darken($BaseColor, 10%),lighten($BaseColor,20%));
  }
}

footer nav.menu
{
  a,
  a:link,
  a:active,
  a:visited
  {
    text-decoration: none;
  }

  ul
  {
    height: auto;

    li
    {
      display: block;
      padding: .125em 0;
      font-size: 0.875em;
      font-family: $fontFamilyAlt;
      line-height: inherit;
      border-right: 0 none;

      a
      {
        color: $AccentColor1;
      }

      &:hover
      {
        a
        {
          color: darken( $AccentColor1, 20% );
        }

        ul {
            display: none;
        }
      }

    }
  }
}

/*
--------------------
Blog list layout
--------------------
<section id="blog">

  <article>
    <footer>
      <p>
        <time class="month">Month</time><br>
        <time class="day">Day</time>
      </p>
    </footer>
    <div>
      <h1><a href="URL">Label</a></h1>
      <p>Content</p>
    </div>
  </article>

  <footer>
    <p style="clear: both;"><a href="FeedURL"><img src="FeedImage" alt="Subscribe"> Subscribe</a></p>
  </footer>

</section>
  
*/
section#blog {
  article {
    border-bottom: 1px solid $BaseColor;
    padding-top: $bs;
    padding-bottom: $bs;
    footer {
      float: left;
      width: $bs * 3;
      p {
        text-align: right;
        line-height: 1;
        time.month {
          font-weight: bold;
        }
        time.day {
        }
      }
    }
    & > div {
      margin-left: $bs * 4;
    }
    h1 {
      margin: 0;
      a {
        color: $BaseColor;
        text-decoration: none;
      }
      a:hover {
        color: $AccentColor1;
      }
    }
    p {
      margin: 0;
    }
  }
}
